<template>
  <div>
    <div id="main">
      技能排行榜
    </div>
    <div id="main1">
      学历分布图
    </div>
    <div id="main2">
      学历和薪资折线图
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';



export default {
  name: "kfecharts",
  mounted() {
    var myChart = echarts.init(document.getElementById('main'));
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));

    fetch("http://127.0.0.1:5000/getkfEcharts").then((e) => {
      return e.json()
    }).then((e) => {
      // 绘制柱状图表
      myChart.setOption({
        title: {
          text: '技能排行榜TOP10'
        },
        tooltip: {},
        xAxis: {
          data: e[0]
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: e[1]
          }
        ]
      });

      fetch("http://127.0.0.1:5000//getkfEduEcharts").then((e) => {
        return e.json()
      }).then((e) => {
        // 绘制饼状图
        myChart1.setOption(
            {
              title: {
                text: '学历分布',
                subtext: 'Fake Data',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: e,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            }
        )


        fetch("http://127.0.0.1:5000/getkfEduAndSalaryEcharts").then((e) => {
          return e.json()
        }).then((e) => {
          //绘制折线图
          myChart2.setOption(
              {
                xAxis: {
                  type: 'category',
                  data: e[0]
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    data: e[1],
                    type: 'line'
                  }
                ]
              }
          )
        })

      })

    })

  }
  }
// }
</script>

<style scoped>
#main, #main1 ,#main2{
  width: 100%;
  height: 400px;
}
</style>